<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue的库 -->
    <script src="vue.js"></script>
</head>

<body>
    <!-- {{插值表达式}} -->
    <div id="app">{{content}}</div>


    <!-- 使用原生JS实现div里面的文本
    <script>
        var dom = document.getElementById("app");
        dom.innerHTML = "helloworld";
        // 两秒钟后将helloworld改为bye world
        setTimeout(function () {
            dom.innerHTML = "bye world";
        }, 2000)
    </script> -->

    <script>
        var app = new Vue({
            // el：指定Vue实例接管id为app的标签里的Dom
            el: '#app',
            // 通过插值表达式调用数据
            data: {
                content: 'helloworld'
            }
        })
        setTimeout(function () {
            app.$data.content = "bye world";
            // 这里的$data相当于data的别名
            // 这里我想的是this.content = "bye world",显然不对，不能用this，因为脱离了var app{}的范围。
        }, 2000)
    </script>
</body>

</html>